<template>
  <a-modal
    title="新增按钮元数据"
    :visible="visible"
    :width="800"
    @ok="submitForm"
    @cancel="handleCancel"
  >
    <a-row :gutter="16">
      <a-col :span="16">
        <a-form :form="form">
          <a-form-item label="按钮名称" v-bind="formItemLayout">
            <a-input v-decorator="field('name','功能名称',true)"/>
          </a-form-item>
          <a-form-item label="按钮代码" v-bind="formItemLayout">
            <a-input v-decorator="field('code','功能代码',true)" :addonBefore="row.code+'.'"/>
          </a-form-item>
          <a-form-item label="排序号" v-bind="formItemLayout">
            <a-input-number v-decorator="field('order','排序号',true,1)" :min="1" :max="999999"/>
          </a-form-item>
        </a-form>
      </a-col>
      <a-col :span="8">
        <a-card>
          <div class="quick-title">快捷输入常用按钮：</div>
          <div>
            <a-button class="quick" size="small" @click="quickInput('列表','List')">列表</a-button>
            <a-button class="quick" size="small" @click="quickInput('新增','Add')">新增</a-button>
            <a-button class="quick" size="small" @click="quickInput('编辑','Edit')">编辑</a-button>
            <a-button class="quick" size="small" @click="quickInput('详情','Detail')">详情</a-button>
            <a-button class="quick" size="small" @click="quickInput('删除','Delete')">删除</a-button>
          </div>
        </a-card>
      </a-col>
    </a-row>
  </a-modal>
</template>

<script>

  import {field} from '@/utils/util'
  import {maxBy} from 'lodash'
  import {addButton} from "@/api/view"

  export default {

    name: 'ButtonCreateModal',

    data() {
      return {
        formItemLayout: {
          labelCol: {span: 6},
          wrapperCol: {span: 18}
        },
        fields: ['name', 'code', 'order'],
        row: {},
        index: null,
        form: this.$form.createForm(this),
        ModalText: 'Content of the modal',
        visible: false,
      }
    },

    methods: {

      field,

      open(row, index) {
        this.form.resetFields()
        this.row = row
        this.index = index
        this.visible = true
        // 初始化排序号
        this.initOrderField()
      },

      initOrderField() {
        let order = 1
        console.log('row.order : %o', this.row.order)
        console.log('row.children : %o', this.row.children)
        if (this.row.order && this.row.children.length === 0) {
          order = this.row.order + 1
        }
        if (this.row.order && this.row.children.length > 0) {
          const maxOrderObj = maxBy(this.row.children, 'order')
          if (maxOrderObj && maxOrderObj.order) {
            order = maxOrderObj.order + 1
          }
        }
        this.$nextTick(() => {
          this.form.setFieldsValue({order})
        })

      },

      handleCancel() {
        this.visible = false;
      },

      quickInput(name, code) {
        let data = {
          name,
          code
        }
        this.$nextTick(() => {
          this.form.setFieldsValue(data)
        })
        this.initOrderField()
      },


      // 提交
      submitForm() {
        this.form.validateFields(this.fields, (err, values) => {
          if (err) {
            console.log(err)
            return false
          }

          let data = Object.assign({}, values)
          data.type = 2 // 按钮类型
          data.tag = this.row.tag
          data.code = `${this.row.code}.${data.code}`
          data.parent = this.row.code
          data.parents = `${this.row.parents},${this.row.code}`
          data.visible = true

          addButton(data).then(() => {
            this.$message.success('新增按钮元数据成功')
            //this.visible = false
            this.$emit('success', data, this.index)
          })
        })
      }
    }

  }
</script>

<style lang="less" scoped>
  .quick-title {
    margin-bottom: 10px;
  }

  .quick {
    margin: 5px;
  }
</style>
